import React, { Component, useState } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import { Divider } from 'antd';
import { getUserInfo } from '../../../api/index.js';
import { formatDateSlashes } from "../../../utils/dataUtils";
import './data.less'

export default class Data extends Component {
  constructor(a) {
    super(a);
    this.state = {
      currentItems: [],//当前页码的数据
      currentPage: 1,//当前的页码
      totalPages: 0,//所有的页码总数
      itemsPerPage: 15//每页展示多少数据
    }
  }
  async componentWillUnmount() {

  }
  async componentDidMount() {
    //获取数据
    let line = ''
    let page = 1
    let items = 15
    let result = await getUserInfo(line, page, items)
    let itemsdata = result.msg
    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('itemsPerPage', itemsPerPage);
    const totalPages = Math.ceil(itemsdata.count / itemsPerPage);
    meshLog('totalPages', itemsdata.userInfo);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata.userInfo;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,
    })
    //this.goToPage(currentPage);
  }
  goToPage = async (page) => {
    meshLog('当前展示的page', page);
    let line = ''
    let items = 15
    let result = await getUserInfo(line, page, items)
    let itemsdata = result.msg
    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('itemsPerPage', itemsPerPage);
    const totalPages = Math.ceil(itemsdata.count / itemsPerPage);
    meshLog('totalPages', itemsdata.userInfo);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata.userInfo;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,
    })
  };

  // 首页
  gotoFirstPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = 1
      this.setState({
        currentPage: 1,
      })
      this.goToPage(1);
    }

  };
  // 上一页
  goToPreviousPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage - 1,
      })
      this.goToPage(currentPage - 1);
    }

  };
  // 下一页
  goToNextPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage + 1,
      })
      this.goToPage(currentPage + 1);
    }
  };

  // 末页
  goToEndPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.totalPages
      this.setState({
        currentPage: currentPage,
      })
      this.goToPage(currentPage);
    }
  };
  // 选择页确定
  changeTOPage = () => {
    var inputElement = document.getElementById('inputid');
    let inputValue = inputElement.value;
    let currentPage = 0
    meshLog('inputValue', inputValue);

    if (inputValue >= this.state.totalPages) {
      inputElement.value = this.state.totalPages
      currentPage = this.state.totalPages
    } else {
      currentPage = parseInt(inputValue)//强制转换成数字类型
    }

    this.setState({
      currentPage: currentPage,
    })
    this.goToPage(currentPage);
  };
  //查询按钮
  handleFruitChange = async () => {
    // const selectBox = document.getElementById("fruit1");
    // const selected = selectBox.options[selectBox.selectedIndex].value;
    const selectBox2 = document.getElementById("fruit2");
    const selected2 = selectBox2.options[selectBox2.selectedIndex].value;
    if (selected2 === '选择的跑道') {
      meshLog('456456',);
    } else {
      meshLog('跑道', selected2);
      let line = selected2
      let items = 15
      let page = 1
      let result = await getUserInfo(line, page, items)
      let itemsdata = result.msg
      // 计算总页数
      let itemsPerPage = this.state.itemsPerPage
      meshLog('itemsPerPage', itemsPerPage);
      const totalPages = Math.ceil(itemsdata.count / itemsPerPage);
      meshLog('totalPages', itemsdata.userInfo);
      let currentPage = page //默认显示第一个页码的数据
      const currentItems = itemsdata.userInfo;
      this.setState({
        currentPage: currentPage,
        totalPages: totalPages,
        itemsdata: itemsdata,
        currentItems: currentItems,
      })
    }

  };
  render() {
    return (
      <div className="data" >
        <div className="datadaohang">
          <span className='datadaohangzuo' >位置： 用户服务 》跑步数据</span>
        </div>
        <div className="dataneirong">
          <div className="dataneirong1" >
            <div className="query" >
              <div className="querytitle" >条件查询</div>
              <Divider />
              <div className="querydate" >

                {/* <label className="fruit1" for="fruit1">性别</label>
                <select id="fruit1" style={{ color: "#888888" }} name="fruit1">
                  <option disabled selected >请选择性别</option>
                  <option value="nan">男</option>
                  <option value="nv">女</option>
                </select> */}

                <label className="fruit2" for="fruit2">选择的跑道</label>
                <select id="fruit2" style={{ color: "#888888" }} name="fruit2">、
                  <option disabled selected>请选择跑道</option>
                  <option value="1080">1080</option>
                  <option value="950">950</option>
                  <option value="800">800</option>
                  <option value="780">780</option>
                  <option value="670">670</option>
                  <option value="560">560</option>
                  <option value="530">530</option>
                  <option value="500">500</option>
                  <option value="410">410</option>
                  <option value="320">320</option>
                  <option value="240">240</option>
                  <option value="100">110</option>
                </select>
                <button className="handleFruit" onClick={() => { this.handleFruitChange() }}>
                  查询
                </button>

              </div>

            </div>
            <div className="show"  >
              <div className="showtitle" >用户列表</div>
              <div className="showdate" >
                <div className="titledate">
                  <div className="span1">序号</div>
                  <div className="span1">用户名</div>
                  {/* <div className="span1">性别</div> */}
                  <div className="span1">创建时间</div>
                  <div className="span1">更新时间</div>
                  <div className="span1">跑道</div>
                  <div className="span1">夜跑次数</div>
                  <div className="span1">夜跑记录(km)</div>
                  <div className="span1">累计时长</div>
                </div>
                {
                  this.state.currentItems && this.state.currentItems.map((element, key) => {
                    if (!element.children) {
                      return (
                        <div className="datashuju" style={{ backgroundColor: key % 2 == 0 ? '' : '#F1F5FB' }} key={key}>
                          <div className="span2" >{key + 1}</div>
                          <div className="span2" >{element.nickname}</div>
                          {/* <div className="span2">性别</div> */}
                          <div className="span2">{formatDateSlashes(element.createTime)}{ }</div>
                          <div className="span2">{formatDateSlashes(element.updateTime)}</div>
                          <div className="span2">{element.line}</div>
                          <div className="span2">{element.runTimes}</div>
                          <div className="span2">{element.distance}</div>
                          <div className="span2">{element.time}</div>
                        </div>
                      )
                    }
                    else {
                      return (
                        <span>{element}</span>
                      )
                    }
                  })
                }
              </div>
              <div className='zongyeshu'>
                <span style={{ marginLeft: 40 }}>共{this.state.totalPages}页</span>
                <label className="PerPage" for="PerPage">每页显示</label>
                <select id="PerPage" style={{ color: "#000000" }} name="PerPage">
                  <option value="15">15</option>
                  <option value="10">10</option>
                  <option value="5">5</option>
                </select>个
              </div>
              <div className='current'>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.gotoFirstPage() }}>
                  首页
                </button>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.goToPreviousPage() }}>
                  上一页
                </button>
                {Array.from({ length: this.state.totalPages > 10 ? 10 : this.state.totalPages }, (_, i) => (
                  <button
                    key={i}
                    onClick={() => { this.goToPage(i + 1) }}
                    style={{ margin: '2px' }}
                    disabled={this.state.currentPage === i + 1}
                  >
                    {i + 1}
                  </button>
                ))}
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToNextPage() }}>
                  下一页
                </button>
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToEndPage() }}>
                  末页
                </button>
                <span>&nbsp;&nbsp;共{this.state.totalPages}页&nbsp;&nbsp;</span>
                到 <input id='inputid' style={{ width: 30 }} type='number' min={1} ></input>页&nbsp;&nbsp;
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.changeTOPage() }}>
                  确定
                </button>
              </div>
            </div>
          </div>
          <div className="running">
            <h1 style={{ marginTop: 20 }} >当前有用户正在夜跑</h1>
          </div>
        </div>
      </div >
    )
  }
}
